<template>
  <div class="container">
    <div class="header">一次排出集计</div>
    <div class="echart-container" style="padding: 30px 20px 0px;  overflow-y: hidden;">
      <div class="table-box">
        <div class="t-body" ref="tBody">
          <div class="t-row">
            <div v-for="(col, idx) in tableData.title" :key="idx" class="t-column" v-html="col"
              style="line-height: 1.4;padding: 3px;"></div>
          </div>
          <div v-for="(row, index) in tableData.dataList" :key="index" class="t-row">
            <div v-for="(col, idx) in row" :key="idx" class="t-column">{{ col }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, defineProps } from 'vue'

const tableData = ref({
  title: ['', '群底<br>胶带', '引线<br>切断', '封口板<br>放置', '引线<br>焊接', '强度<br>检测', '引线<br>折曲'],
  dataList: [
    ['9:00', 1, '', 1, 2, '', ''],
    ['9:00', 1, '', 1, '', '', ''],
    ['9:00', 1, '', '', 2, '', '2'],
    ['9:00', 1, '', 1, 2, '', ''],
    ['9:00', 1, '', 1, 2, '', ''],
    ['9:00', 1, '', 1, 2, '', ''],
    ['9:00', 1, '', 1, 2, '', ''],
  ]
})

// 获取 tBody 元素
// const tBody = ref()
// const tipBox = ref()
// function createMaxChild(params) {
//   const tBodyDiv = tBody.value

//   var elements = tBodyDiv.querySelectorAll('.js-create')

//   while (elements.length > 0) {
//     tBodyDiv.removeChild(elements[0])
//   }

//   // 计算 tBody 的高度
//   const div1Height = tBodyDiv.offsetHeight - tipBox.value.offsetHeight

//   // 计算每个子 div 的高度
//   const childDivHeight = 30

//   // 计算最多可以插入的子 div 个数
//   const maxChildDivs = Math.floor(div1Height / childDivHeight) - tableData.value.length - 1
//   // 创建文档片段
//   const fragment = document.createDocumentFragment()

//   // 创建子 div 并添加到文档片段中
//   for (let i = 0; i < maxChildDivs; i++) {
//     const div = document.createElement('div')
//     div.className = 't-row js-create'
//     for (let j = 0; j < tableData.value[0].length; j++) {
//       const divCol = document.createElement('div')
//       divCol.className = 't-column'
//       div.appendChild(divCol)
//     }
//     fragment.appendChild(div)
//   }

//   // 将文档片段一次性插入到 div1 中
//   tBodyDiv.appendChild(fragment)
// }
// nextTick(() => {
//   createMaxChild()
//   // 根据页面大小自动响应图表大小
//   window.addEventListener('resize', function () {
//     createMaxChild()
//   })
// })

</script>
<style lang="less">
@import url(./container.less);

.echart-container {
  &::-webkit-scrollbar {
    width: 4px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(97, 184, 179, 0.1);
    background: #78b4b4;
  }

  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px rgba(87, 175, 187, 0.1);
    border-radius: 10px;
  }
}

.table-box {
  height: 100%;

  flex: 1;
  display: flex;
  flex-direction: column;

  .t-header {
    background: url(../assets/image/table-header.png) 0px 0px no-repeat;
    background-size: 100% 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -1px;
    z-index: 10;

    .header-text {
      font-size: 20px;
      font-weight: bold;
      color: #FFFFFF;
      background: linear-gradient(0deg, #FFFFFF 0%, #98DEFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .t-body {
    flex: 1;
    border: 1px solid #2B7CB5;

    .tip-text {
      padding: 8px;
      font-size: 12px;
      color: #FFFFFF;
      line-height: 1.8;
    }
  }

  .t-row {
    display: flex;
    text-align: center;
    color: #FFFFFF;
    min-height: 32px;
    line-height: 32px;
    border-bottom: 1px solid rgba(43, 124, 181, .5);
    &:nth-child(even) {
      background: rgba(12, 112, 189, 0.2);
    }
  }

  .t-column {
    color: white;
    flex: 1;
    padding: 0px 3px;
    border-right: 1px solid rgba(43, 124, 181, .4);

    &:nth-last-child(1) {
      border-right: none;
    }
  }
}
</style>
